/* * @Author: "" * @Date: 2023-06-29 11:53:07 * @LastEditors: Yejing * @LastEditTime: 2023-06-29 11:53:51 * @Description: desc */
<template>
	<view class="order-logistics-container">
		<c-layout>
			<c-navigation-bar :title=" $t('order.progress')"></c-navigation-bar>
			<view class="container-box">
				<view class="productBox-intro" style="display: flex;justify-content:start;padding-top: 30rpx ;">
					<view class="" style=" color: #1B1D29;font-size: 28rpx;">{{ $t('order.godsNum') }}:</view>
					<view class="tittle-box" style=" color: #1B1D29;font-size: 28rpx;">
						{{ orderList.skuOrderId}}
					</view>
				</view>
				<!-- 订单的商品列表 -->
				<view class="order-box">
					<view class="order-item">
						<orderCard :orderDetails="orderList"></orderCard>
					</view>
				</view>
				<view class="steps-box" v-if="show">
					<view :class="`steps-item ${item.date ? 'is-passing' : ''}`" v-for="(item, index) in lists" :key="index">
						<view class="steps-icon"></view>
						<!-- 文字 -->
						<view class="steps-text">
							<!-- 名称描述 -->
							<view>
								<view class="steps-name">
									{{ item.val }}
								</view>
								<view class="steps-des">
									{{ item.des }}
								</view>
							</view>
							<!-- 日期时间 -->
							<view>
								<view class="steps-time" v-if="item.date">
								{{publicJS.timeZoneSwitching(item.date)}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 取消申请 -->
				<view class="release-btn" v-if="orderList.returnInfo.status == 0">
					<u-button type="primary" class="custom-style" @click="submit()">{{ $t('system.cancelApplication') }}</u-button>
				</view>
				<!-- 填写运单号 -->
				<view class="release-btn" v-if="orderList.returnInfo.status == 1 && orderList.returnInfo.type != 3">
					<u-button type="primary" class="custom-style" @click="goFillTrackingNumber(1)">{{ $t('system.fillNumber') }}</u-button>
				</view>
				<!-- 查看运单号 -->
				<view class="release-btn" v-if="(orderList.returnInfo.status == 4|| orderList.returnInfo.status == 2) && (orderList.returnInfo.type == 2 ||orderList.returnInfo.type == 1)">
					<u-button type="primary" class="custom-style" @click="goFillTrackingNumber(2)">{{ $t('system.checkNumber') }}</u-button>
				</view>
				<!-- 重新申请-->
				<view class="release-btn" v-if="orderList.returnInfo.status == -2 ||orderList.returnInfo.status == -1">
					<u-button type="primary" class="custom-style" @click="reapply()">{{ $t('system.reapply') }}</u-button>
				</view>
			</view>
			<promptDialog ref="promptDialogs"></promptDialog>
			<view>
				<u-toast ref="uToast" />
			</view>
		</c-layout>
	</view>
</template>

<script>
export default {
	data() {
		return {

			
			orderList: null,
			stepList: null,
			lists: [],
			show: false,
			returnGoods: {
				0: {
					status: 0,
					val1:  this.$t('orderDetails.applyForReturning'),
					val2:  this.$t('orderDetails.Apply_replacement'),
					val3:  this.$t('orderDetails.refund'),
					des: this.$t('orderDetails.merchantaudit'),
					date: null
				},
				1: {
					status: 1,
					val: this.$t('orderDetails.applicationApproved'),
					des: this.$t('orderDetails.Waiting_return'),
					date: null
				},
				'-1': {
					status: -1,
					val:  this.$t('orderDetails.applicationRejected'),
					des: this.$t('orderDetails.not_agree'),
					date: null
				},
				2: {
					status: 2,
					val: this.$t('orderDetails.sent_back'),
					des:  this.$t('orderDetails.seller_inspect'),
					date: null
				},
				3: {
					status: 3,
					val: this.$t('orderDetails.refunded'),
					des: this.$t('orderDetails.Being_refunded'),
					date: null
				},
				6: {
					status: 6,
					val: this.$t('orderDetails.ReturnCompleted'),
					des: this.$t('orderDetails.returned_account'),
					date: null
				},
				'-2': {
					status: -1,
					val: this.$t('orderDetails.Cancelled_application'),
					des: this.$t('orderDetails.re_apply'),
					date: null
				},
			},
			exchange: {
				0: {
					status: 0,
					val1:  this.$t('orderDetails.applyForReturning'),
					val2:  this.$t('orderDetails.Apply_replacement'),
					val3:  this.$t('orderDetails.refund'),
					des: this.$t('orderDetails.merchantaudit'),
					date: null
				},
				1: {
					status: 1,
					val: this.$t('orderDetails.applicationApproved'),
					des: this.$t('orderDetails.Waiting_return'),
					date: null
				},
				'-1': {
					status: -1,
					val: this.$t('orderDetails.applicationRejected'),
					des: this.$t('orderDetails.not_agree'),
					date: null
				},
				2: {
					status: 2,
					val: this.$t('orderDetails.sent_back'),
					des: this.$t('orderDetails.seller_inspect'),
					date: null
				},
				3: {
					status: 3,
					val: this.$t('orderDetails.exchange_goods'),
					des: this.$t('orderDetails.being_replaced'),
					date: null
				},
				4: {
					status: 4,
					val: this.$t('orderDetails.Merchant_sent'),
					des: this.$t('orderDetails.remember_check'),
					date: null
				},
				5: {
					status: 5,
					val: this.$t('orderDetails.Receipt_has_confirmed'),
					des: this.$t('orderDetails.replacement_item'),
					date: null
				},
				6: {
					status: 6,
					val: this.$t('orderDetails.Converter_complete'),
					des: this.$t('orderDetails.replacement_item'),
					date: null
				},
				'-2': {
					status: -1,
					val: this.$t('orderDetails.Cancelled_application'),
					des: this.$t('orderDetails.re_apply'),
					date: null
				},
			},
			refund: {
				0: {
					status: 0,
					val1:  this.$t('orderDetails.applyForReturning'),
					val2:  this.$t('orderDetails.Apply_replacement'),
					val3:  this.$t('orderDetails.refund'),
					des: this.$t('orderDetails.merchantaudit'),
					date: null
				},
				1: {
					status: 1,
					val: this.$t('orderDetails.applicationApproved'),
					des:this.$t('orderDetails.merchant_refund'),
					date: null
				},
				'-1': {
					status: -1,
					val: this.$t('orderDetails.applicationRejected'),
					des: this.$t('orderDetails.not_agree'),
					date: null
				},
				'-2': {
					status: -1,
					val:this.$t('orderDetails.Cancelled_application'),
					des: this.$t('orderDetails.re_apply'),
					date: null
				},
				6: {
					status: 6,
					val: this.$t('orderDetails.Refund_completed'),
					des: this.$t('orderDetails.returned_account'),
					date: null
				}
			}
		};
	},
	onLoad() {
		this.orderList =JSON.parse(JSON.stringify(this.vuex_shoping_cartList))  ;
		console.log(111, this.orderList);
	

		//退货成功 步骤条显示最后一条
		// if ((this.orderList.status == 2 && this.orderList.processUser == 2 )|| this.orderList.isDelete==1) {
		// 	this.stepList[3].date = '123456';
		// 	this.stepList.splice(2, 1);
		// }
		// if (this.orderList.status == 0) {
		// 	this.stepList.splice(2, 1);
		// }

		// if (this.orderList.status == 0){
		// 	//未处理
		// }else if( this.orderList.status == 1){
		// 	//不同意
		// 	this.stepList[2].date = '123456';

		// }else{

		// }
		this.getProgress();
	},
	methods: {
		//重新申请售后
		reapply() {
			if (this.orderList.orderStatus == 3) {
				console.log('退货、换货、退款');
				uni.navigateTo({
					url: `/pages/order/forRefund?type=0`,
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			} else if (this.orderList.orderStatus == 1) {
				console.log('退款');
				uni.navigateTo({
					url: `/pages/order/forRefund?type=7`,
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			} else {
				console.log('退款');
				uni.navigateTo({
					url: `/pages/order/refundProgress`,
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			}
		},
		//获取流程时间点
		getProgress() {

			let progress = {};
			// console.log(9999999,this.orderList.returnInfo.type);
			if (this.orderList.returnInfo.type == 1) {
				//退货
				progress = this.returnGoods;
			} else if (this.orderList.returnInfo.type == 2) {
				progress = this.exchange;
			} else {
				progress = this.refund;
			}
			// console.log(777777777,progress);
			this.$u.get(`/app/shopOrderReturnApproved/process/${this.orderList.returnInfo.id}`).then((r) => {
				r.data.reverse().forEach((item) => {
					
					let tt = {};
					let o = progress[`${item.status}`];
					let dd = item.opinion ? item.opinion:"" 
					tt.status = item.status;
					if(item.status==0){
						let type= item.type
						switch (type){
							case 1:
								tt.val=o.val1							
								break;
							case 2:
								tt.val=o.val2
								break;
							case 3:
								tt.val=o.val3
								break;
							default:
								break;
						}
					}
					
					tt.des = o.des
					if(item.opinion){
						tt.des = `${this.$t('orderDetails.Reason')} ：${dd}` 
						
					}
					
					tt.date = item.createTime;
					this.lists.push(tt);
				});
				this.show = true;
				// console.log(88888, this.lists);
				if(this.lists.length<2){
					
				this.lists.push({})
				}
			});
		},

		submit() {
			this.$refs.promptDialogs.show({
				//为什么需要点两下才关闭

				confirm: (close) => {
					this.$u.delete(`/app/shopOrderReturnApproved/${this.orderList.returnInfo.id}`).then((r) => {
						if (r.code == 200) {
							this.showToast(this.$t('orderDetails.CancelSuccessful'), '/pages/order/myOrder');
						}
					});

					close();
				},
				des: this.$t('orderDetails.CancelSuccessfuls'),
				title: this.$t('storeManagement.hint'),
				btnColor: '#2934d0', //按钮颜色
				icon: 'tip',
				btnText: this.$t('card.confirm')
			});
		},
		// 
		
		
		//填写运单号
		goFillTrackingNumber(key) {
			if (key == 1) {
				uni.navigateTo({
					url: '/pages/order/fillTrackingNumber?type=0', //输入运单号++
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			} else {
				uni.navigateTo({
					url: '/pages/order/fillTrackingNumber?type=1', //输入运单号++
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			}
		},
		showToast(tittle, url) {
			this.$refs.uToast.show({
				title: tittle,
				type: 'default',
				url: url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.order-logistics-container {
	.container-box {
		height: 87vh;
		padding-left: 0;
		padding-right: 0;

		> view {
			padding: 0 30rpx;
		}

		.order-box {
			border-bottom: 8rpx solid #f7f8fa;

			.order-item {
				padding: 28rpx 0;
				position: relative;

				&:not(:last-child) {
					&::after {
						position: absolute;
						content: '';
						width: 100%;
						height: 2rpx;
						background-color: #e1e8e8;
						bottom: -2rpx;
					}
				}
			}
		}

		.steps-box {
			margin-top: 40rpx;
			padding-bottom: 150rpx;
			height: 65%;
			overflow: auto;
			.steps-item {
				display: flex;
				padding-bottom: 60rpx;
				position: relative;
				> .steps-text {
					margin-left: 30rpx;
					display: flex;
					flex: auto;
					justify-content: space-between;
					width: 96%;
					> view {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}

					& > view:nth-child(2) {
						text-align: right;
						color: #a8a8a8;
						font-size: 20rpx;
					}

					.steps-name {
						color: #1e2432;
						font-size: 30rpx;
						font-weight: 500;
					}

					.steps-des {
						color: #323755;
						font-size: 24rpx;
						width: 300rpx;
					}
					.steps-time{
						width: 240rpx;
					}
				}
				&.is-passing:not(:last-child) ::after {
					position: absolute;
					content: '';
					height: calc(100% - 48rpx);
					width: 4rpx;
					background-color: #2934d0;
					left: 22rpx;
					top: 48rpx;
				}
				.steps-icon {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					border: 4rpx solid #2934d0;
				}

				&.is-passing .steps-icon {
					background: #2934d0;
				}
			}
		}
	}
}

.release-btn {
	display: flex;
	flex-wrap: wrap;
	position: fixed;
	left: 0;
	bottom: 58rpx;
	right: 0;
	.custom-style {
		width: 670rpx;
		height: 120rpx;
		background: #f78585;
		border-radius: 20rpx;
	}
}
</style>
